<template>
  <div class="action">
    <!-- 弹出层第一页 -->
    <van-cell-group v-if="show">
      <van-cell title="不敢兴趣" icon="closed-eye" @click="notIntering" />
      <van-cell title="反馈垃圾内容" icon="edit" is-link @click="openMore" />
      <van-cell title="拉黑作者" icon="delete" />
    </van-cell-group>
    <!-- 弹出层第二页 -->
    <van-cell-group v-else>
      <van-cell title="返回" icon="arrow-left" @click="returnShow" />
      <van-cell
        :title="item.label"
        icon="fail"
        v-for="item in report"
        :key="item.value"
        @click="reportArticle(item.value)"
      />
    </van-cell-group>
  </div>
</template>

<script>
// 引入文章的类型数据
import report from "@/utils/report.js";
export default {
  data() {
    return {
      show: true,
      report: report
    };
  },
  methods: {
    notIntering() {
      // 调用父组件方法，在父组件中调接口，删除后台不喜欢的数据
      this.$emit("dislikeArticle");
    },
    // 打开感兴趣列表
    returnShow() {
      this.show = true;
    },
    // 打开举报列表
    openMore() {
      this.show = false;
    },
    // 举报文章
    reportArticle(type) {
      // 拿到当前文章类型
      // 调用父组件方法，把文章类型传递给父组件
      this.$emit("report", type);
      // 父组件调用接口删除当前文章
    }
  }
};
</script>
<style lang="less" scoped>
.action {
  width: 100%;
}
</style>
